@import '../style/basic.scss';
.list {
  background-color: #fff;
  border-radius: 12rpx;
  width: 94.6%;
  margin-left: 2.7%;
  .top {
    @include flex-center;
    padding: 22rpx 20rpx 17rpx 20rpx;
    .img {
      border-radius: 50%;
      image {
        border-radius: 50%;
      }
    }
    .title {
      flex: 1;
      color: #000;
      font-weight: bold;
      font-size: 32rpx;
      margin: 0 8rpx;
      font-family: PingFang-SC-Bold;
      
    }
    .desc {
      color: #969696;
      font-size: 26rpx;
    }
  }
  .action {
    border-top: 1rpx solid #eee;
    padding: 14rpx 20rpx;
    @include flex-center-between;
    .text-area {
      color: #969696;
      font-size: 24rpx;
      @include flex-center;
      view:first-child {
        margin-right: 24rpx;
      }
    }
    .btn-area {
      @include flex-center;
      .refund {
        border: 1rpx solid #eee;
        border-radius: 12rpx;
        padding: 14rpx 16rpx;
        color: #969696;
        font-size: 24rpx;
        font-weight: bold;
        font-family: PingFang-SC-Bold;
      }
      .agree {
        margin-left: 10rpx;
        padding: 14rpx 33rpx;
        background: linear-gradient(0deg, #003194 0%, #5DB1FF 100%);
        color: #fff;
        font-size: 24rpx;
        font-weight: bold;
        border-radius: 12rpx;
        font-family: PingFang-SC-Bold;
      }
    }
  }
  .scrollContainer {
    width: 100%; 
  }
  .shop-area {
    white-space: nowrap;
    padding-left: 20rpx;
    .item {
      display: inline-block;
      margin-right: 24rpx;
      width: 199rpx;
      border-radius: 12rpx;
      margin-right: 11rpx;
      margin-bottom: 24rpx;
      .img {
        border-radius: 12rpx 12rpx 0 0;
        image {
          border-radius: 12rpx 12rpx 0 0; 
        }
      }
      .con {
        @include flex-center-between;
        flex-direction: column;
        background-color: #F7F7F7;
        border-radius: 0 0 12rpx 12rpx; 
        padding: 16rpx 0 18rpx 0;
        .price {
          display: flex;
          align-items: baseline;
          margin: 8rpx 0;
      
          view {
            font-weight: bold;
            color: $primary-main-color;
          }
          .unit {
            font-size: 20rpx;
          }
          .num {
            font-size: 32rpx;
          }
        }
        .title {
          width: 199rpx;
          box-sizing: border-box;
          display: block;
          padding: 0 18rpx;
          font-weight: bold;
        }
        .commission {
          color: $primary-main-color;
          font-size: 26rpx;
        }
      }
    }
  }
}